import styles from './index.module.less'
import HalfCircleProgress from './HalfCircleProgress'
import { DatePicker, Input } from '@terminus/nusi-slim'
import ProcessDetails from './ProcessDetails'

const FilterTab = () => {
  return (
    <div className={styles.filterTab}>
      <div className={styles.filterTabHeader}>
        <div className={styles.filterTabHeaderTitle}>
          <span>筛选器</span>
        </div>
      </div>
      <div className={styles.filterTabContent}>
        <div className={styles.filterTabContentItem}>
          <div className={styles.filterTabContentItemContent}>
            <div className={styles.filterTabHalfCircleProgress}>
              <HalfCircleProgress
                title="活动"
                value={40}
                total={80}
                unit="K"
              />
              <HalfCircleProgress
                title="案例"
                value={934}
                total={934}
                unit=""
              />
            </div>
            <div className={styles.filterTabContentItemContentItem}>
              <Input />
            </div>
          </div>
        </div>
        <div className={styles.filterTabContentItem}>
          <div className={styles.filterTabContentItemContent}>
            <div className={styles.filterTabContentItemContentItem}>
              <ProcessDetails />
            </div>
          </div>
        </div>
        <div className={styles.filterTabContentItem}>
          <div className={styles.filterTabContentItemTitle}>周期选择器</div>
          <div className={styles.filterTabContentItemContent}>
            <div className={styles.filterTabContentItemContentItem}>
              <DatePicker.RangePicker
                format="YYYY-MM-DD"
                placeholder={['开始时间', '结束时间']}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default FilterTab